Jassif Team Institution

Vue v-if অ্যালগরিদম

প্লেইন জাভাস্ক্রিপ্টের তুলনায়, v-if নির্দেশের সাথে Vue-তে একটি শর্তের উপর নির্ভর করে একটি HTML উপাদান তৈরি করা অনেক সহজ।

Vue এর সাহায্যে আপনি যদি শর্তসাপেক্ষে তৈরি করতে চান এমন HTML এলিমেন্টে সরাসরি if-statement লিখবেন। এটা যে সহজ.

Vue-তে শর্তসাপেক্ষ রেন্ডারিং

Vue-তে শর্তসাপেক্ষ রেন্ডারিং v-if, v-else-if এবং v-else নির্দেশাবলী ব্যবহার করে করা হয়।

শর্তসাপেক্ষ রেন্ডারিং মানে হল একটি HTML উপাদান শুধুমাত্র তখনই রেন্ডার করা হয় যখন একটি শর্ত সত্য হয়, যেমন একটি ভেরিয়েবল যদি 'সত্য' হয় তাহলে "ইন স্টক" টেক্সট তৈরি করুন এবং ভেরিয়েবলটি 'ফলস' হলে 'স্টকে নেই' টেক্সট তৈরি করুন।

<p v-if="typewritersInStock">
  in stock
</p>

<p v-else>
  not in stock
</p>

Vue-তে শর্ত

একটি শর্ত, বা "যদি-বিবৃতি", হয় সত্য বা মিথ্যা।

একটি শর্ত প্রায়শই দুটি মানের মধ্যে একটি তুলনা পরীক্ষা, যেমন উপরের উদাহরণে, একটি মান অন্যটির চেয়ে বড় কিনা তা দেখতে।

আমরা তুলনা অপারেটর যেমন <, >= বা !== এই ধরনের পরীক্ষাগুলি করতে ব্যবহার করি।

&& বা || এর সাথে পরীক্ষার তুলনা করুন যেমন যৌক্তিক অপারেটর সঙ্গে মিলিত হতে পারে

জাভাস্ক্রিপ্ট তুলনা সম্পর্কে আরও জানতে আমাদের জাভাস্ক্রিপ্ট টিউটোরিয়াল পৃষ্ঠা দেখুন।

আমরা স্টকে থাকা টাইপরাইটারের সংখ্যা স্টকে আছে কিনা তা নির্ধারণ করতে তুলনামূলক পরীক্ষার মাধ্যমে ব্যবহার করতে পারি:

<p v-if="typewriterCount > 0">
  in stock
</p>

<p v-else>
  not in stock
</p>

শর্তসাপেক্ষ রেন্ডারিংয়ের জন্য নির্দেশাবলী

এই ওভারভিউ বর্ণনা করে যে কীভাবে শর্তসাপেক্ষ রেন্ডারিংয়ের জন্য ব্যবহৃত বিভিন্ন Vue প্রক্রিয়া একসাথে কাজ করে।

উপরে দেখানো তিনটি নির্দেশনা সহ একটি উদাহরণ দেখতে, আমরা পূর্ববর্তী উদাহরণটিকে v-else-if দিয়ে প্রসারিত করতে পারি যাতে ব্যবহারকারী 'ইন স্টক', 'খুব কম বাকি!' অথবা 'স্টক শেষ' দেখুন:

<p v-if="typewriterCount>3">
  In stock
</p>

<p v-else-if="typewriterCount>0">
  Very few left!
</p>

<p v-else>
  Not in stock
</p>

একটি ফাংশন থেকে রিটার্ন মান ব্যবহার করুন

v-if স্টেটমেন্টের সাথে তুলনা পরীক্ষা ব্যবহার করার পরিবর্তে, আপনি একটি ফাংশন থেকে 'সত্য' বা 'মিথ্যা' রিটার্ন মান ব্যবহার করতে পারেন:

<div id="app">
  <p v-if="text.includes('pizza')">The text includes the word 'pizza'</p>
  <p v-else>The word 'pizza' is not found in the text</p>
</div>
data() {
  return {
    text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
  }
}

উপরের উদাহরণটি দেখানোর জন্য প্রসারিত করা যেতে পারে যে v-if এছাড়াও অন্যান্য ট্যাগ তৈরি করতে পারে, যেমন <div> এবং <img> ট্যাগ:

<div id="app">
  <div v-if="text.includes('pizza')">
    <p>The text includes the word 'pizza'</p>
    <img src="img_pizza.svg">
  </div>
  <p v-else>The word 'pizza' is not found in the text</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
      }
    }
  })
  app.mount('#app')
</script>

নীচের উদাহরণটি আরও প্রসারিত করা হয়েছে।

<div id="app">
  <div v-if="text.includes('pizza')">
    <p>The text includes the word 'pizza'</p>
    <img src="img_pizza.svg">
  </div>
  <div v-else-if="text.includes('burrito')">
    <p>The text includes the word 'burrito', but not 'pizza'</p>
    <img src="img_burrito.svg">
  </div>
  <p v-else>The words 'pizza' or 'burrito' are not found in the text</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
      }
    }
  })
  app.mount('#app')
</script>

ঐতিহ্যগত জাভাস্ক্রিপ্টের তুলনায়, আপনি এখন Vue দিয়ে কোড লিখতে পারেন যা নির্দিষ্ট পরিস্থিতিতে উপাদান তৈরি করে।

ভিউ টিউটোরিয়াল

ব্যায়াম দিয়ে নিজেকে পরীক্ষা করুন

<div id="app">
  <p ="typewritersInStock">
    in stock
  </p>
  <p >
    not in stock
  </p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
  data() {
    return {
      typewritersInStock: true
    }
  }
})
app.mount('#app')
</script>